<template>
    <el-dialog v-model="dialogVisible" :title="winTitle" :close-on-click-modal="false" append-to-body width="800"
        class="editDialog" align-center>
        <el-form inline class="basicForm" label-position="right" v-model="formObj" label-width="100px">
            <el-form-item label="串口" style="width:98%">
                <el-select v-model="formData.portName" placeholder="请选择串口">
                    <el-option v-for="item in ports" :key="item.portName" :label="item.portName"
                        :value="item.portName" />
                </el-select>
            </el-form-item>
            <br>
            <el-form-item label="波特率">
                <el-input v-model="formData.serialBaud"></el-input>
            </el-form-item>

            <el-form-item label="数据位">
                <el-input v-model="formData.dataBits"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="停止位">
                <el-input v-model="formData.stopBits"></el-input>
            </el-form-item>
            <el-form-item label="校验位">
                <el-input v-model="formData.serialParity"></el-input>
            </el-form-item>
            <br />

            <el-form-item label="读超时（ms）">
                <el-input v-model="formData.timeoutRead"></el-input>
            </el-form-item>
            <el-form-item label="写超时(ms)">
                <el-input v-model="formData.timeoutWrite"></el-input>
            </el-form-item>
            <br />

            <el-form-item label="采集模式" style="width: 98%;">
                <el-select v-model="formData.dataType" placeholder="请选择数据采集模式">
                    <el-option v-for="item in dataTypeArr" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>

            <br />
            <el-form-item label="分片大小">
                <el-select v-model="formData.shardSize" placeholder="请选择数据分片大小">
                    <el-option v-for="item in shardSizeArr" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="字节序">
                <el-select v-model="formData.byteOrder" placeholder="请选择字节序">
                    <el-option v-for="item in byteOrderArr" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <br />
            <el-form-item label="请求指令" style="width: 98%;">
                <el-input v-model="formData.writeCmd" placeholder="请输入请求指令，多条指令以;分割"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="启用/禁用" style="width: 98%;">
                <el-select v-model="formData.isValid" placeholder="请选择启用/禁用">
                    <el-option v-for="item in ynArr" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <br />
        </el-form>

        <template #footer>
            <el-button @click="dialogVisible = false" auto-insert-space>取消</el-button>
            <el-button type="primary" @click="onConfirm" auto-insert-space>确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, defineProps, reactive } from "vue";

import { ElMessage } from "element-plus";

import { serialPorts, serialGet, serialSave } from "@/utils/requests";

let dialogVisible = ref(false);

// eslint-disable-next-line no-undef,no-unused-vars
const emits = defineEmits(["confirm"]);

let winTitle = ref("串口配置");


const byteOrderArr = ref([
    { label: "大端", value: 1 },
    { label: "小端", value: 2 },
    { label: "其他", value: 3 }
])

const shardSizeArr = ref([
    { label: "2字节", value: 2 },
    { label: "4字节", value: 4 },
])

const dataTypeArr = ref([
    { label: "请求/响应", value: "tran" },
    { label: "发布模式", value: "pub" },
])
const ynArr = ref(
    [{ label: "启用", value: 1 },
    { label: "禁用", value: 0 }]
)
/* 1. 初始值常量 */
const initialForm = () => ({
    id: null,
    macCode: "",
    portName: "",
    serialBaud: null,
    dataBits: null,
    stopBits: null,
    serialParity: "",
    timeoutRead: null,
    timeoutWrite: null,
    dataType: null,
    writeCmd: "",
    shardSize: null,
    byteOrder: null,
    isValid: 0
})

let formData = reactive(initialForm());

const openDialog = (rowData) => {
    debugger;
    dialogVisible.value = true;

    Object.assign(formData, initialForm());

    reqSerialGet();

    reqSerialPorts();

    formData.macCode = rowData.mac; 
};

const onConfirm = () => {
    let p = ports.value.find(item => item.portName === formData.portName);

    let isCommit = true;
    if (p.macCode !== formData.macCode) {
        ElMessageBox.confirm(p.portName + "已被设备编码 [" + p.macCode + "] 绑定，是否确认换绑？", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).catch((err) => {
            isCommit = false;
        });
    }
    if (isCommit) {

        debugger;

        serialSave({ ...formData }).then((data) => {
            if (data) {
                ElMessage.success("保存成功");
                dialogVisible.value = false;
            } else {
                ElMessage.error("保存失败");
            }
        });
    }



};

const ports = ref([]);

const reqSerialPorts = () => {
    serialPorts().then((res) => {
        ports.value = res;
    })
}

const reqSerialGet = (macCode) => {
    serialGet({ macCode: macCode }).then((res) => {
        Object.assign(formData, res); 
    })
}

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.basicForm,
.selectionForm {
    >* {
        width: calc(50% - 20px);
        margin-right: 20px;

        .selectInput {
            flex: 1;
        }

        :deep(.el-date-editor) {
            width: 100%;
        }
    }

    >.long {
        width: calc(100% - 20px);
        margin-right: 20px;
    }

    .sumUnit {
        .text {
            margin-right: 10px;
        }
    }
}

.uploadWrap {
    position: relative;
    width: 270px;

    input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}
</style>
